<template>
  <div>
    <div class="m-d-charts" id="relationship" v-loading="loading" v-show="hasData"></div>
    <div class="m-d-charts" style="position: relative" v-show="hasNoData">
      <span class="un-data-th">暂无数据哦～</span>
    </div>
  </div>
</template>

<script>
  import api from '../api/api'
  import echarts from 'echarts/lib/echarts'
  // 引入柱状图
  import 'echarts/lib/chart/graph';
  import 'echarts/lib/chart/line';
  import 'echarts/lib/component/title';
  import 'echarts/lib/component/legend';
  import 'echarts/lib/component/toolbox';
  import 'echarts/lib/component/markPoint';
  import 'echarts/lib/component/tooltip';

  export default {
    name: "relationEcharts",
    props: ['keywordId', 'timeRange'],
    data() {
      return {
        loading: true,
        fromDateString: '',
        toDateString: '',
        relationFromName: [],
        relationToName: [],
        relationLink: [],
        hasData: true,
        hasNoData: false
      }
    },
    mounted() {
      this.relationship = echarts.init(document.getElementById('relationship'));
      this.resize();
    },
    methods: {
      resize() {
        // echarts自适应页面
        const self = this;
        setTimeout(() => {
          window.onresize = function () {
            self.relationship.resize()
          }
        }, 20)
      },
      getData() {
        api.Relationship({keywordId: this.keywordId, fromDateString: this.fromDateString, toDateString: this.toDateString})
          .then(res => {
            this.loading = false;
            if(res.listResult.length == 0){
              this.hasData = false;
              this.hasNoData = true;
              return false
            }
            this.relationFromName = [];
            this.relationToName = [];
            this.relationLink = [];
            const result = res.listResult;
            const mainName = [];
            const mainToName = [];
            for (let i = 0; i < result.length; i++) {
              mainName.push(result[i].name);
              mainToName.push(result[i].toName);
              this.relationLink.push({
                source: result[i].name,
                target: result[i].toName,
                name: result[i].relation,
                label: {
                  normal: {
                    formatter: function(params, ticket, callback) {
                      params.name = params.data.name;
                      return params.name;
                    },
                    show: true
                  }
                },
              })
            }
            const onlyName = [...new Set(mainName)];
            const onlyToName = [...new Set(mainToName)];
            for (let j = 0; j < onlyName.length; j++) {
              this.relationFromName.push({
                name: onlyName[j],
                symbolSize: 40,
                itemStyle: {
                  normal: {
                    color: '#f56e12'
                  }
                }
              })
            }
            for (let k = 0; k < onlyToName.length; k++) {
              this.relationToName.push({
                name: onlyToName[k],
                symbolSize: 12,
                itemStyle: {
                  normal: {
                    color: '#4e7eed'
                  }
                }
              })
            }
            this.initData()
          }).catch(e => {
          console.log(e);
        });
      },
      initData() {
        const option = {
          toolbox: {
            show: true,
            itemSize: 20,
            right: 20,
            feature: {
              dataZoom: {show: false},
              dataView: {show: false},
              magicType: {show: false},
              restore: {show: false},
              saveAsImage: {}
            }
          },
          animationDurationUpdate: 1500,
          animationEasingUpdate: 'quinticInOut',
          series: [{
            type: 'graph',
            tooltip: {},
            ribbonType: true,
            layout: 'circular',
            lineStyle: {
              normal: {
                width: 1.0,
                curveness: 0.2,
                opacity: 0.9
              }
            },
            circular: {
              rotateLabel: true
            },
            symbolSize: 30,
            roam: true,
            focusNodeAdjacency: true,

            edgeSymbol:['circle', 'arrow'],
            edgeSymbolSize: [4, 10],
            edgeLabel: {
              normal: {
                textStyle: {
                  fontSize: 14,
                  fontWeight: 'bold',
                  fontFamily: '宋体'
                }
              }
            },

            itemStyle: {
              normal: {
                label: {
                  rotate: true,
                  show: true,
                  textStyle: {
                    fontSize: 16,
                    color: '#333',
                    fontWeight: 'bold'
                  }
                },
                color: ["#393f51", "#393f51", "#393f51", "#393f51", "#393f51", "#393f51", "#393f51", "#85d6f7", "#85d6f7", "#85d6f7", "#85d6f7", "#85d6f7", "#85d6f7", "#85d6f7", "#85d6f7", "#85d6f7", "#85d6f7"] /* 内的颜色#393f51，外的颜色#85d6f7 */
              },
              emphasis: {
                label: {
                  show: true
                  // textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE
                }
              }
            },

            data: this.relationToName.concat(this.relationFromName),
            links: this.relationLink
          }]
        };
        this.relationship.setOption(option);
      }
    },
    watch: {
      keywordId() {
        this.relationship.clear();
        this.hasData = true;
        this.hasNoData = false;
        this.loading = true;
        this.getData()
      },
      timeRange() {
        if (this.timeRange == null) {
          this.fromDateString = '';
          this.toDateString = ''
        } else {
          this.fromDateString = this.timeRange[0];
          this.toDateString = this.timeRange[1];
        }
        this.relationship.clear();
        this.hasData = true;
        this.hasNoData = false;
        this.loading = true;
        this.getData()
      }
    }
  }
</script>

<style scoped>

</style>
